<template>
	<div>
		<view class="v1"><img :src="datas.goodsImgList[0].url" alt=""></view>
		<view class="mes">
			<view class="right">
				<p class="p2">{{datas.goodsName}}</p>
				<p class="p3">富含矿物质，富含矿物质</p>
				<p class="p4">￥{{datas.goodsPrice}}</p>
				<P class="p5">{{datas.goodsBrandName}}</P>
				<span class="span2">{{datas.goodsCommentnum}}条评价{{datas.feedback}}好评</span>
			</view>
		</view>
		<view class="line"></view>
		<view class="v2">
			<a href=""><button class="btn1">图文详情</button></a>
			<navigator url="xiangqing" hover-class="navigator-hover"><a href=""><button class="btn2">评价</button></a></navigator>
			<navigator url="canshu" hover-class="navigator-hover"><a href=""><button class="btn3">规格参数</button></a></navigator>
		</view>
		<view class="v5"></view>
		
		<view class="v5">
			 <view class="grace-bg-white grace-common-mt grace-padding grace-common-border">
				<view class="grace-form">
					<view class="grace-items">
                        <graceNumberBox :value="1"></graceNumberBox>
                    </view>
				</view>
			 </view>
			<p class="p2">￥20</p>
			<navigator url="dingdanqueren" hover-class="navigator-hover"><button class="btn6">立即购买</button></navigator>
		</view>
		<!-- 后三张图片 -->
		<view class="img">
			<img src="../../static/pic_03.gif" alt="">
			<img src="../../static/pic_07.gif" alt="">
			<img src="../../static/pic1_03.gif" alt="">
			<img src="../../static/pic1_07.gif" alt="">
		</view>
		<view class="space"></view>
	</div>
</template>

<script>
import graceNumberBox from "../../static/graceUI/components/graceNumberBox.vue";
export default {
    data() {
        return {
            datas:{
				goodimgList:[
					{
						url:""
					}
				]
			},
        }
    },
	 onUnload: function () {
								wx.reLaunch({
								  url: 'shop'
								})
							  },
	onLoad(option){
		console.log(option);
			uni.request({
					url:'http://192.144.170.210/maishui/goods/selectGoodsByGoodsId',
					method:'POST',
					data:{
						goodsId:option.goodsId
					},
					header:{
						'Content-Type': 'application/x-www-form-urlencoded', 
					},
					success: (res) => {
						console.log("成功");
						this.text = 'request success';
						this.datas = res.data.data;
						console.log(this.datas);	
			},
			fail:err=>{
				console.log(err);
			},
			complete:()=>{}
				});	
				
				
		
	},						  
    methods:{
        change : function(data){
            console.log(data);
            uni.showToast({
                title:"值 : "+data[0] + " index : "+data[1],
                icon:"none"
            })
        }
    },
    components:{
        graceNumberBox
    }
}
</script>

<style>
	.img{
		width: 95%;
		height: 100%;
		margin:auto;
		margin-left: -0.25rem;
		margin-top:1rem;
	}
	*{
			box-sizing: border-box;
			}
	.v1{
		margin-left: 1.25rem;
		display: flex;
	}
	.v1 img{
		/* left: 2.38rem;
		top: 5.94rem; */
		width: 20.56rem;
		height: 20.75rem;
		margin-top:1.88rem;
		border-radius: 0.31rem;
		margin:auto;
	
	}
	.mes{
		margin-left: 0.85rem;
		margin-top:0.63rem;
	}
	
	.mes .right{
		/* float: right; */
		/* border-bottom:1px solid #eee; */
	}
	
	.mes .right img{
		display: block;
		left: 8.88rem;
		top: 8rem;
		width: 0.96rem;
		height: 0.75rem;
		/* margin-top:40px; */
	
	}
	.mes .right .p1{
		margin-top: -0.81rem;
		margin-left: 0.96rem;
		left: 3.06rem;
		top: 28.13rem;
		/* width: 4.81rem; */
		height: 1.19rem;
		line-height: 1.06rem;
		color: rgba(187, 187, 187, 1);
		font-size: 0.75rem;
		text-align: left;
		font-family: PingFangSC-regular;
	
	
	}
	.mes .right .p2{
	
		width: 18.88rem;
		height: 2.81rem;
		line-height: 1.38rem;
		color: rgba(16, 16, 16, 1);
		margin:auto;
		font-size: 0.9rem;
		text-align: left;
		font-family: PingFangSC-regular;
	
	
	}
	.mes .right .p3{
		left: 1.44rem;
		top: 33.38rem;
		/* width: 7.56rem; */
		height: 1rem;
		line-height: 1rem;
		color: rgba(171, 171, 171, 1);
		font-size: 0.75rem;
		text-align: left;
		font-family: PingFangSC-regular;
	
	
	}
	.mes .right .p4{
	    left: 8.75rem;
		top: 12.69rem;
		/* width: 3.31rem; */
		height: 1.63rem;
		line-height: 1.63rem;
		color: rgba(59, 156, 219, 1);
		font-size: 1.1rem;
		text-align: left;
		font-family: PingFangSC-regular;
	
	}
	.mes .right .span1{
		left: 11.56rem;
		top: 9.81rem;
		/* width: 3.5rem; */
		height: 1rem;
		line-height: 1rem;
		color: rgba(171, 171, 171, 1);
		font-size: 0.71rem;
		text-align: left;
		font-family: PingFangSC-regular;
		border-left: 1px soild #eee;
		float:left;
		margin-top:-1.25rem;
		margin-left:2.81rem;
		
	}
	.mes .right .p5{
		left: 0.64rem;
		top: 14.37rem;
		width: 1.68rem;
		height: 1rem;
		line-height: 1rem;
		color: rgba(59, 156, 219, 1);
		font-size: 11px;
		text-align: left;
		font-family: PingFangSC-regular;
		border:1px solid #3B9CDB;
	
	}
	.mes .right .span2{
		left: 11.31rem;
		top: 14.38rem;
		width: 9.44rem;
		height: 1rem;
		line-height: 1rem;
		color: rgba(171, 171, 171, 1);
		font-size: 11px;
		text-align: left;
		font-family: PingFangSC-regular;
		margin-top:-0.94rem;
		margin-left: 2.35rem;
		float: left;
	}
	.v2{
		display: flex;
	}
	
	.line{
		width: 100%;
		height: 0.31rem;
		background-color: #F0F0F0;
		margin-top:0.63rem;
		
	}
	.btn1,.btn2,.btn3{
		width: 5.63rem;
		height: 2.13rem;
		line-height: 2.13rem;
		border-radius: 0.31rem;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(16, 16, 16, 1);
		font-size: 0.75rem;
		/* float: left; */
		/* justify-content: space-around; */
		border:rgb(187, 187, 187) 1px solid;	
		margin-top:1.68rem;
		margin-left:0.75rem;
		border:none;
		
	}
	.btn1{
		/* margin-left: 1.06rem; */
		background-color: #3B9CDB;
		color: #fff;
	}
	.btn2{
		/* margin-left: 0.62rem; */
		
	}
	.btn3{
		/* margin-left: 0.62rem; */
		
	}
	/* a:active{
		margin-left: 0.62rem;
		background-color: #3B9CDB;
		color: #fff;
	} */
	.v3 .img1{
		left: 0.88rem;
		top: 27.65rem;
		width: 4.38rem;
		height: 4.38rem;
		margin-top:1.38rem;
		margin-left:0.88rem;
	}
	.v3 .shouji{
		left: 5.06rem;
		top: 27.81rem;
		width: 4.75rem;
		height: 1.25rem;
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		text-align: left;
		font-family: PingFangSC-regular;
		float:right;
		margin-right:13rem;
		margin-top:2.06rem;
	}
	.v3 .date{
		left: 11.25rem;
		top: 54.25rem;
		width: 4.63rem;
		height: 1.06rem;
		color: rgba(153, 153, 153, 1);
		font-size: 12px;
		text-align: left;
		font-family: PingFangSC-regular;
		float: right;
		margin-right: 7.56rem;
		margin-top:-3.94rem;
	}
	.v3 .xing .img2{
		left: 21.5rem;
		top: 52.81rem;
		width: 0.94rem;
		height: 0.94rem;
		background-color: rgba(255, 198, 24, 1);
		float:right;
		margin-right:1rem ;
		margin-top:4.06rempx;
	
	}
	.v3 .img3{
		left: 4.88rem;
		top: 46.88rem;
		width: 1.25rem;
		height: 1.25rem;
		background-color: rgba(59, 156, 219, 1);
		display: block;
		margin-top:-1.88rem;
		margin-left:5.5rem;
		/* float: right; */
	
	}
	.v3 .water{
		left: 6.38rem;
		top: 46.81rem;
		width: 5.25rem;
		height: 1.25rem;
		color: rgba(59, 156, 219, 1);
		font-size: 14px;
		text-align: left;
		font-family: PingFangSC-regular;
		margin-left: 7.56rem;
		margin-top:-1.32rem;
	
	}
	.v3 .text{
		left: 0.9rem;
		top: 64.06rem;
		width: 10.5rem;
		height: 1.25rem;
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		text-align: left;
		font-family: PingFangSC-regular;
		margin-top:0.75rem;
		margin-left: 0.94rem;
	}
	.v4{
		width: 100%;
		height: 0.125rem;
		background-color:#F0F0F0;
		margin-top:0.81rem;
	}
	.v5{
		width: 100%;
		height: 3rem;
		bottom:0;
		margin-top:0.625rem;
		background-color: #fefefe;
		position: fixed;
		/* z-index:999; */
	}
	.v5 .btn4{
		width: 2.19rem;
		height: 1.87rem;
		float: left;
		background-color: #fefefe;
		border:none;
		border:1px solid #999999;
		border-radius: none;
		margin-left: 0.625rem;
		border-radius: 20% 0 0 20% ;
		margin-top:0.625rem;
		
	}
	.v5 .btn4 p{
		text-align: center;
		line-height: 1.88rem;
	
	}
	.v5 .span1{
		width: 2.19rem;
		height: 1.88rem;
		
	}
	.v5 .btn5{
		width: 2.19rem;
		height: 1.88rem;
		text-align: center;
		float: left;
		
		background-color: #fefefe;
		/* border:none; */
		border-right: none;
		border:1px solid #999999;
		border-radius:0 20% 20% 0;
		margin-top:0.625rem;
		
		
	}	
	.v5 .btn5 p{
		text-align: center;
		line-height: 1.88rem;
		
	}
	.v5 .p1{
		width: 2.19rem;
		height: 1.88rem;
		float: left;
		text-align: center;
		border-top:1px solid #999999;
		border-bottom:1px solid #999999;
		margin-top:0.625rem;
	}
	.v5 .btn6{
		margin-top: -5rem;
		width: 8.13rem;
		height: 3rem;
		background-color: #ff5000;
		line-height: 3rem;
		float: right;
		color: #FFFFFF;
		border-left: none;
		border:1px solid #999999;
		
		
	}
	.grace-form{
		border:none;
		margin-top:-1rem;
	}
	/* .grace-items{
		margin-top:-0.5rem;
	} */
	.v5 .p2{
		font-size: 16px;
		color: #fd0000;
		margin-top:0.625rem;
		margin-left:12.5rem;
	}
	/* .v5 .add{
		width: 105px;
		height: 37px;
	} */
	
	.space{
		width: 100%;
		height: 5rem;
		background-color: #FFFFFF;
	}
	
</style>
